<template>
  <div class="approval-container">
    <div class="top">
      <el-row type="flex" justify="left">
        <div class="top_item">
          <label class="label">企业名称</label>
          <el-input v-model="partCompany" type="text" placeholder="请输入企业名称" class="input" clearable />
        </div>
        <div class="top_item">
          <label class="label">审批节点</label>
          <el-select v-model="approvalNode" clearable>
            <el-option value="信息初审">信息初审</el-option>
            <el-option value="名单核对">名单核对</el-option>
          </el-select>
        </div>
        <div class="top_item">
          <el-switch
            v-model="approveByGroup"
            active-color="#13ce66"
            inactive-color="#999"
            active-text="批量审批"
            style="margin-right: 30px;margin-left:30px"
            :disabled="approInfoData.length === 0"
            @change="handleSwitchChange"
          >
            批量审批
          </el-switch>
          <el-button v-if="approveByGroup === true" type="primary" icon="el-icon-s-claim" :disabled="approvalList.length === 0" @click="showApprovalDiagByGroup()">一键审批</el-button>
          <el-button v-if="approveByGroup === true" @click="selectAll()">{{ isSelectAll ? "取消全选" : "全选" }}</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getListInfo()">查询</el-button>
          <el-button @click="reset()"> 重置</el-button>
        </div>
      </el-row>
      <el-row type="flex" justify="left">
        <el-table
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          max-height="400px"
          :data="approInfoData"
        >
          <el-table-column v-if="false" prop="approvalId" label="编号" />
          <el-table-column prop="" label="序号" :formatter="handleIndex" />
          <el-table-column prop="participateCompanyName" label="企业名称" />
          <el-table-column prop="approvalNode" label="审批节点" :formatter="handleStatus" />
          <el-table-column prop="insertTime" label="创建时间" :formatter="handleDate" />
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button v-if="approveByGroup === false" size="small" type="primary" @click="showApprovalDiag(scope.row)">审批</el-button>
              <el-checkbox v-if="approveByGroup === true" v-model="scope.row.checked" @change="handleChange($event, scope.row)">选择</el-checkbox>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row type="flex" justify="left" class="pagination">
        <el-pagination
          :page-size="pageSize"
          :current-page="currentPage"
          :page-sizes="[5,10,20,50]"
          layout="sizes,prev,pager,next,total"
          :total="totalCount"
          @size-change="handleApproInfoSizechange"
          @current-change="handleApproInfoCurrentchange"
        />
      </el-row>
      <el-dialog v-if="showApprovalDialog === true" title="名单核对" :visible.sync="showApprovalDialog" custom-class="customWidth">
        <h2>请确认参保名单和缴费录入人数是否一致并确认信息是否无误</h2>
        <el-row type="flex" justify="center" style="margin-top:20px">
          <label style="min-width:fit-content;display:flex;align-items:center;margin-right:10px">意见</label>
          <el-input v-model="opinion" type="text" placeholder="请输入意见" clearable />
        </el-row>
        <el-row type="flex" justify="center" style="margin-top:20px">
          <el-button type="primary" @click="doApproval('1')">通过</el-button>
          <el-button size="small" @click="doApproval('0')">撤回</el-button>
        </el-row>
      </el-dialog>
      <el-dialog v-if="showApprovalDialog3 === true" title="批量审批" :visible.sync="showApprovalDialog3" custom-class="customWidth">
        <h2>请确认信息是否一致并确认信息是否无误</h2>
        <el-row type="flex" justify="center" style="margin-top:20px">
          <label style="min-width:fit-content;display:flex;align-items:center;margin-right:10px">意见</label>
          <el-input v-model="opinion" type="text" placeholder="请输入意见" clearable />
        </el-row>
        <el-row type="flex" justify="center" style="margin-top:20px">
          <el-button type="primary" @click="doGroupApproval('1')">通过</el-button>
          <el-button size="small" @click="doGroupApproval('0')">撤回</el-button>
        </el-row>
      </el-dialog>
      <el-dialog v-if="showApprovalDialog2 === true" title="信息初审" :visible.sync="showApprovalDialog2" custom-class="customWidth">
        <ul class="detailLeftPart">
          <li>
            <label>地区归属</label>
            <el-input v-model="payInfo.companyArea" disabled />
          </li>
          <li>
            <label>参保单位</label>
            <el-input v-model="payInfo.participateCompanyName" disabled />
          </li>
          <li>
            <label>开票单位</label>
            <el-input v-model="payInfo.invoiceCompanyName" disabled />
          </li>
          <li>
            <label>转账账号</label>
            <el-input v-model="payInfo.payAccount" disabled />
          </li>
        </ul>
        <ul class="detailLeftPart">
          <li>
            <label>缴费人数</label>
            <el-input v-model="payInfo.participateNumber" disabled />
          </li>
          <li>
            <label>经办人</label>
            <el-input v-model="payInfo.userName" disabled />
          </li>
          <li>
            <label>应缴金额</label>
            <el-input v-model="payInfo.paySum" disabled />
          </li>
          <li>
            <label>上级工会</label>
            <el-input v-model="payInfo.superiorUnion" disabled />
          </li>
        </ul>
        <ul class="detailLeftPart">
          <li>
            <label>信用代码</label>
            <el-input v-model="payInfo.invoiceCompanyCreditCode" disabled />
          </li>
          <li>
            <label>缴费单位</label>
            <el-input v-model="payInfo.payCompanyName" disabled />
          </li>
          <li>
            <label>开户银行</label>
            <el-input v-model="payInfo.payCompanyAcctBank" disabled />
          </li>
          <li>
            <label>手机号</label>
            <el-input v-model="payInfo.userPhone" disabled />
          </li>
        </ul>
        <ul class="detailLeftPart">
          <li>
            <label>缴费年份</label>
            <el-input v-model="payInfo.payYear" disabled />
          </li>
          <li>
            <label>审批文件</label>
            <el-image :src="fileName" style="max-width: 100px; max-height:100px" />
          </li>
        </ul>
        <el-row type="flex" justify="center" style="margin-top:20px">
          <label style="min-width:fit-content;display:flex;align-items:center;margin-right:10px">意见</label>
          <el-input v-model="opinion" type="text" placeholder="请输入意见" clearable />
        </el-row>
        <el-row type="flex" justify="center" style="margin-top:20px">
          <el-button type="primary" @click="doApproval('1')">通过</el-button>
          <el-button size="small" @click="doApproval('0')">撤回</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import approApi from '@/api/approval.js'
import payApi from '@/api/pay.js'
import fileApi from '@/api/file.js'
import store from '@/store'
import { MessageBox } from 'element-ui'
import { getUserInfo } from '@/api/user.js'
import router from '@/router'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      fileName: '',
      isSelectAll: false,
      approveByGroup: false,
      partCompany: '',
      pageSize: 5,
      currentPage: 1,
      pageToSelect: [],
      totalCount: 0,
      approInfoData: [],
      approvalDialogTitle: '',
      showApprovalDialog: false,
      showApprovalDialog2: false,
      showApprovalDialog3: false,
      payInfo: null,
      opinion: '',
      approval: '',
      approvalList: [],
      approvalNode: ''
    }
  },
  created() {
    this.getListInfo()
  },
  methods: {
    doGroupApproval: function(result) {
      const params = {
        approvalList: JSON.stringify(this.approvalList),
        approvalResult: result,
        approvalRemark: this.opinion
      }
      if (this.opinion === null || this.opinion === '') {
        this.$message.error('请输入意见')
        return
      }
      this.$confirm('请确认', '确认消息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        approApi.updateApproInfoByGroup(params).then(res => {
          if (res.retCode === '0000') {
            this.$message.success('批量审批成功')
          } else {
            this.$message.error('批量审批失败，原因' + res.retMsg)
          }
          this.getListInfo()
          this.showApprovalDialog3 = false
          this.opinion = ''
          this.approvalList = []
          this.approveByGroup = false
        })
      }).catch(() => {
        this.$message.info('取消成功')
      })
    },
    doApproval: function(result) {
      const params = {
        approvalId: this.approval.approvalId,
        payInfoId: this.approval.payInfoId,
        approvalNode: this.approval.approvalNode,
        approvalResult: result,
        approvalRemark: this.opinion
      }
      if (this.opinion === null || this.opinion === '') {
        this.$message.error('请输入意见')
        return
      }
      this.$confirm('请确认', '确认消息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        approApi.updateApproInfo(params).then(res => {
          if (res.retCode === '0000') {
            this.$message.success('审批成功')
          } else {
            this.$message.error('审批失败，原因' + res.retMsg)
          }
          this.showApprovalDialog2 = false
          this.showApprovalDialog = false
          this.opinion = ''
          this.getListInfo()
        })
      }).catch(() => {
        this.$message.info('取消成功')
      })
    },
    selectAll: function() {
      this.pageToSelect.push(this.currentPage)
      if (!this.isSelectAll) {
        for (var i = 0; i < this.approInfoData.length; i++) {
          if (!this.approInfoData[i].checked) {
            this.approvalList.push(this.approInfoData[i])
          }
        }
      } else {
        for (var m = 0; m < this.approInfoData.length; m++) {
          const item = this.approInfoData[m]
          for (var j = 0; j < this.approvalList.length; j++) {
            const item2 = this.approvalList[j]
            if (item.approvalId === item2.approvalId) {
              const index = this.approvalList.indexOf(item2)
              this.approvalList.splice(index, 1)
            }
          }
        }
      }
      console.log(this.approvalList)
      this.isSelectAll = !this.isSelectAll
      const bool = this.isSelectAll
      this.approInfoData.forEach(function(item) {
        item.checked = bool
      })
    },
    showApprovalDiagByGroup: function() {
      getUserInfo().then(res => {
        if (res.userId === 'guest' || !getToken()) {
          MessageBox.alert('用户登录已过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              store.dispatch('user/logout').then(() => {
                router.push('/login')
              })
            }
          })
        } else {
          this.showApprovalDialog3 = true
        }
      })
    },
    showApprovalDiag: function(approInfo) {
      getUserInfo().then(res => {
        if (res.userId === 'guest' || !getToken()) {
          MessageBox.alert('用户登录已过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              store.dispatch('user/logout').then(() => {
                router.push('/login')
              })
            }
          })
        } else {
          if (approInfo.approvalNode === '2') {
            this.approvalDialogTitle = '信息初审'
            const params = {
              payInfoId: approInfo.payInfoId
            }
            payApi.showPayInfoDetail(params).then(res => {
              if (res.retCode === '0000') {
                this.payInfo = res.payInfo
                switch (this.payInfo.companyArea) {
                  case '0' : this.payInfo.companyArea = '市本级'; break
                  case '1' : this.payInfo.companyArea = '吴兴区'; break
                  default: break
                }
                const params = {
                  filePath: this.payInfo.filename
                }
                fileApi.downloadImg(params).then(res => {
                  if (res.retCode === '0000') {
                    this.fileName = res.fileInfo
                  } else {
                    this.$message.error('获取图片信息失败，原因是' + res.retMsg)
                  }
                })
                this.showApprovalDialog2 = true
                this.showApprovalDialog = false
                this.approval = approInfo
              } else {
                this.$message.error('获取缴费信息失败，原因' + res.retMsg)
              }
            })
          } else {
            this.approvalDialogTitle = '名单核对'
            this.showApprovalDialog2 = false
            this.showApprovalDialog = true
            this.approval = approInfo
          }
        }
      })
    },
    reset: function() {
      this.partCompany = ''
      this.approvalNode = ''
    },
    getListInfo: function() {
      this.currentPage = 1
      this.getApproListInfo()
    },
    getApproListInfo: function() {
      var node = ''
      switch (this.approvalNode) {
        case '信息初审': node = '2'; break
        case '名单核对': node = '3'; break
        default: break
      }
      const params = {
        partCompany: this.partCompany,
        node: node,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      approApi.searchApproInfoList(params).then(res => {
        if (res.retCode === '0000') {
          this.approInfoData = res.list
          this.approInfoData.forEach(function(item) {
            item.checked = false
          })
          this.totalCount = res.pageInfo.totalSize
          this.approveByGroup = false
          this.approvalList = []
          this.isSelectAll = false
        } else {
          this.$message.error('获取审批信息失败，原因' + res.retMsg)
        }
      })
    },
    handleApproInfoSizechange: function(val) {
      this.pageSize = val
      this.getListInfo()
    },
    handleApproInfoCurrentchange: function(val) {
      this.currentPage = val
      this.getApproListInfo()
    },
    handleIndex: function(row, column, cellValue, index) {
      return (index + 1) + (this.currentPage - 1) * this.pageSize
    },
    handleDate: function(row, column, cellValue, index) {
      return cellValue.substr(0, 10)
    },
    handleStatus: function(row, column, cellValue, index) {
      var val = ''
      switch (cellValue) {
        case '1': val = '缴费录入'; break
        case '2': val = '信息初审'; break
        case '3': val = '名单核对'; break
        case '4': val = '汇款'; break
        case '5': val = '对账'; break
        case '6': val = '办理完结'; break
      }
      return val
    },
    handleSwitchChange: function(val) {
      if (!val) {
        this.approvalList = []
        for (var item in this.approInfoData) {
          item.checked = false
        }
        this.opinion = ''
        this.approveByGroup = false
        this.isSelectAll = false
      }
    },
    handleChange: function(val, approvalInfo) {
      if (val) {
        this.approvalList.push(approvalInfo)
        approvalInfo.checked = true
      } else {
        console.log(this.approvalList)
        for (var i = 0; i < this.approvalList.length; i++) {
          console.log(this.approvalList[i])
          var index = this.approvalList.indexOf(this.approvalList[i])
          if (this.approvalList[i].approvalId === approvalInfo.approvalId) {
            this.approvalList.splice(index, 1)
            break
          }
        }
        approvalInfo.checked = false
      }
      // 判断是否全选
      let bool = true
      this.approInfoData.forEach(function(item) {
        bool &= item.checked
      })
      this.isSelectAll = bool
      console.log(this.approvalList)
    }
  }
}
</script>
<style>
 /* 顶部条件筛选栏*/
  .top {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    border:1px solid  rgba(0,0,0,0.2);
    box-shadow:1px 1px 2px 0px rgba(0,0,0,0.2);
  }
  .top_item {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
  }
  .top_item_right {
     position: absolute;
     right: 2%;
  }
  .top_item label {
    width: auto;
    min-width: fit-content;
    margin:10px;
  }
  .top_item input {
    width: auto;
    min-width: fit-content;
  }
  .body{
    margin-bottom: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    border: 1px solid  rgba(0,0,0,0.2);
    text-align:center;
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.2);
   }

  .pagination{
    display: flex;
    justify-content: center;
   }
   .addCompany {
    min-width: fit-content;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2%;
   }
   .addCompany label{
    width: 150px;
    left: 5%;
   }
   .customWidth {
    left: 0px;
    right: 0px;
    margin: 0px auto;
    width: fit-content;
    height: fit-content;
    max-height: 80%;
    position:fixed;
    overflow-y:auto;
   }
   .el-dialog__headerbtn .el-dialog__close {
      position: fixed;
    }
    .el-input.is-disabled .el-input__inner {
      border: 0px;
      background-color: #FFFFFF;
      color:black;
      text-align: center;
      margin-bottom:10px;
    }
    .detailLeftPart{
     width: fit-content;
     padding: 10px;
     display: flex;
     height: fit-content;
     justify-content: center;
     align-items: center;
   }
   .detailLeftPart li {
    text-align: center;
    }
    ul{
    list-style: none;
   }
</style>
<style lang="scss" scoped>
.approval {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
